<template>
	<div class="abs-page">
		<Head navTitle="财务报表" />
		<div class="page-container ">
			<div class="cai-grid">
				<el-row type="flex" align="middle" class="data-row ">
					<el-col :span="12">
						<div class="val">0</div>
						<div class="txt">1级总有效人数</div>
					</el-col>
					<el-col :span="12">
						<div class="val">0</div>
						<div class="txt">已发放推广奖励总额</div>
					</el-col>
				</el-row>
				<van-sticky>
					<el-tabs class="bs-tab-flex" v-model="activeName">
						<el-tab-pane label="本月benyue" name="tabOne"></el-tab-pane>
						<el-tab-pane label="上月shangyue" name="tabTwo"></el-tab-pane>
						<el-tab-pane label="历史lishi" name="tabThree"></el-tab-pane>
					</el-tabs>
				</van-sticky>
			</div>
			<div class="pane" v-if="activeName == 'tabOne'">
				<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
					<el-table stripe :data="tableData" style="width: 100%">
						<el-table-column align="center" width="80" prop="level" label="层级">
						</el-table-column>
						<el-table-column align="center" width="80" prop="number" label="人数">
						</el-table-column>
						<el-table-column align="center" prop="income" label="有效收益">
						</el-table-column>
						<el-table-column align="center" prop="angbk" label="代理返佣">
						</el-table-column>
					</el-table>
				</van-list>
				<div class="m-space"></div>
				<div class="end-tabbar fixed">
					<div class="label">合计奖金</div>
					<div class="val text-green">120,000.00</div>
				</div>
			</div>
			<div class="pane" v-if="activeName == 'tabTwo'">
				<van-list v-model="loading2" :finished="finished2" finished-text="没有更多了" @load="onLoad2">
					<el-table stripe :data="tableData2" style="width: 100%">
						<el-table-column align="center" width="80" prop="level" label="层级">
						</el-table-column>
						<el-table-column align="center" width="80" prop="number" label="人数">
						</el-table-column>
						<el-table-column align="center" prop="income" label="有效收益">
						</el-table-column>
						<el-table-column align="center" prop="angbk" label="代理返佣">
						</el-table-column>
					</el-table>
				</van-list>
				<div class="m-space"></div>
				<div class="end-tabbar fixed">
					<div class="label">合计奖金</div>
					<div class="val text-green">230,000.00</div>
				</div>
			</div>
			<div class="pane" v-if="activeName == 'tabThree'">
				<div class="his-table-cell">
					<div class="his-top">2021-09-13</div>
					<el-table stripe :data="tableData3" style="width: 100%">
						<el-table-column align="center" width="80" prop="level" label="层级">
						</el-table-column>
						<el-table-column align="center" width="80" prop="number" label="人数">
						</el-table-column>
						<el-table-column align="center" prop="income" label="有效收益">
						</el-table-column>
						<el-table-column align="center" prop="angbk" label="代理返佣">
						</el-table-column>
					</el-table>
					<div class="end-tabbar ">
						<div class="label">合计奖金</div>
						<div class="val text-green">120,000.00</div>
					</div>
				</div>
				<div class="his-table-cell">
					<div class="his-top">2021-09-13</div>
					<el-table stripe :data="tableData3" style="width: 100%">
						<el-table-column align="center" width="80" prop="level" label="层级">
						</el-table-column>
						<el-table-column align="center" width="80" prop="number" label="人数">
						</el-table-column>
						<el-table-column align="center" prop="income" label="有效收益">
						</el-table-column>
						<el-table-column align="center" prop="angbk" label="代理返佣">
						</el-table-column>
					</el-table>
					<div class="end-tabbar ">
						<div class="label">合计奖金</div>
						<div class="val text-green">120,000.00</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				activeName:"tabOne",
				tableData: [{
					level: '1',
					number: '10',
					income: '23,828.00',
					angbk: '23,828.00'
				}, {
					level: '1',
					number: '10',
					income: '23,828.00',
					angbk: '23,828.00'
				}, {
					level: '1',
					number: '10',
					income: '23,828.00',
					angbk: '23,828.00'
				}, {
					level: '1',
					number: '10',
					income: '23,828.00',
					angbk: '23,828.00'
				}, {
					level: '1',
					number: '10',
					income: '23,828.00',
					angbk: '23,828.00'
				}, {
					level: '1',
					number: '10',
					income: '23,828.00',
					angbk: '23,828.00'
				}, {
					level: '1',
					number: '10',
					income: '23,828.00',
					angbk: '23,828.00'
				}, {
					level: '1',
					number: '10',
					income: '23,828.00',
					angbk: '23,828.00'
				}, ],
				tableData2: [{
					level: '1',
					number: '10',
					income: '23,828.00',
					angbk: '23,828.00'
				}, {
					level: '1',
					number: '10',
					income: '23,828.00',
					angbk: '23,828.00'
				}, {
					level: '1',
					number: '10',
					income: '23,828.00',
					angbk: '23,828.00'
				}, {
					level: '1',
					number: '10',
					income: '23,828.00',
					angbk: '23,828.00'
				}, ],
				tableData3: [{
					level: '1',
					number: '10',
					income: '23,828.00',
					angbk: '23,828.00'
				}, {
					level: '1',
					number: '10',
					income: '23,828.00',
					angbk: '23,828.00'
				}, {
					level: '1',
					number: '10',
					income: '23,828.00',
					angbk: '23,828.00'
				}, {
					level: '1',
					number: '10',
					income: '23,828.00',
					angbk: '23,828.00'
				}, ],
				dialogVisible: false,
				list: [],
				loading: false,
				finished: false,
				list2: [],
				loading2: false,
				finished2: false,
			};
		},
		methods: {
			onLoad() {
				// 异步更新数据
				// setTimeout 仅做示例，真实场景中一般为 ajax 请求
				setTimeout(() => {
					for (let i = 0; i < 10; i++) {
						this.tableData.push({
							level: '1',
							number: '10',
							income: '23,828.00',
							angbk: '23,828.00'
						});
					}
			
					// 加载状态结束
					this.loading = false;
			
					// 数据全部加载完成
					if (this.tableData.length >= 40) {
						this.finished = true;
					}
				}, 1000);
			},
			onLoad2() {
				// 异步更新数据
				// setTimeout 仅做示例，真实场景中一般为 ajax 请求
				setTimeout(() => {
					for (let i = 0; i < 10; i++) {
						this.tableData2.push({
							level: '1',
							number: '10',
							income: '23,828.00',
							angbk: '23,828.00'
						});
					}
			
					// 加载状态结束
					this.loading2 = false;
			
					// 数据全部加载完成
					if (this.tableData2.length >= 40) {
						this.finished2 = true;
					}
				}, 1000);
			},
		}
	}
</script>
